<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mastodon Toot Context</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .toot {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
        }

        .comment {
            border: 1px solid #eee;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div class="toot" id="toot-container">
        <!-- Toot content will be inserted here using JavaScript -->
    </div>

    <h2>Comments:</h2>

    <div id="comments-container">
        <!-- Comments will be inserted here using JavaScript -->
    </div>

    <h2>Add a Comment:</h2>
    <form id="comment-form">
        <label for="username">Your Name:</label>
        <input type="text" id="username" name="username" required><br><br>
        <label for="comment">Comment:</label><br>
        <textarea id="comment" name="comment" rows="4" cols="50" required></textarea><br><br>
        <input type="submit" value="Submit Comment">
    </form>

    <script>
        // !!!IMPORTANT!!! Bot  Mastodon access token ONLY read:statuses 
        const accessToken = "MDI2ZJI2MMQTNZIYOC0ZMTG1LTK3Y2UTODY3OTVMODEYNTUX";
        const mainURL = "https://fmb.ftls.xyz/api/v1/statuses/01H7R08KAAJWR3PMFW69XEJD9J";
        const commentUrl = "https://fmb.ftls.xyz/api/v1/statuses/01H7R08KAAJWR3PMFW69XEJD9J/context";

        // Function to fetch and display the toot and comments
        async function fetchTootAndComments() {
            try {
                const [mainResponse, commentResponse] = await Promise.all([
                    fetch(mainURL, {
                        headers: {
                            "Authorization": `Bearer ${accessToken}`
                        }
                    }),
                    fetch(commentUrl, {
                        headers: {
                            "Authorization": `Bearer ${accessToken}`
                        }
                    })
                ]);
                const [mainData, commentData] = await Promise.all([
                    mainResponse.json(),
                    commentResponse.json()
                ]);

                // Display the toot content at the top
                const tootContainer = document.getElementById("toot-container");
                tootContainer.innerHTML = `
                    <p>${mainData.content}</p>
                    <p>Author: ${mainData.account.display_name}</p>
                `;

                // Display comments
                const commentsContainer = document.getElementById("comments-container");
                commentData.descendants.forEach(comment => {
                    let retoot = commentData.descendants.find(({ id }) => id === comment.in_reply_to_id)
                    if (retoot) {
                        commentsContainer.innerHTML += `
                        <div class="comment">
                            <p>Replay: ${retoot["content"]} </p>
                            <p>-----</p>
                            <p>Comment by ${comment.account.display_name}:</p>
                            <p>${comment.content}</p>
                        </div>
                        `;
                    } else {
                        commentsContainer.innerHTML += `
                        <div class="comment">
                            <p>Comment by ${comment.account.display_name}:</p>
                            <p>${comment.content}</p>
                        </div>
                        `;
                    }
                });
            } catch (error) {
                console.error("Error fetching data:", error);
            }
        }

        // Event listener for submitting a comment
        const commentForm = document.getElementById("comment-form");
        commentForm.addEventListener("submit", async function (event) {
            event.preventDefault();
            const username = document.getElementById("username").value;
            const commentText = document.getElementById("comment").value;

            // You can add logic here to submit the comment using the Mastodon API

            // For this example, we'll just display the comment locally
            const commentsContainer = document.getElementById("comments-container");
            commentsContainer.innerHTML += `
                <div class="comment">
                    <p>Comment by ${username}:</p>
                    <p>${commentText}</p>
                </div>
            `;

            // Clear the form
            commentForm.reset();
        });

        // Fetch and display the toot and comments when the page loads
        fetchTootAndComments();
    </script>
</body>

</html>